<template>
	<view class='move-div'>
		<button type="primary" @click='move'>点击运动</button>
		
		<div id='box'>
			<div id='move' :animation='animationData'>我是移动框</div>
		</div>
	</view>
</template>

<script>
import {animate} from './animate.js';
export default {
	data() {
		return {
			animationData: {}
		};
	},
	methods: {
		move(){
			var self = this;
			animate({
				el: self,   //必选
				animationName: 'animationData',  //必选
				json: {  //必选
					rotate: 45,
					opacity: 0.5,
					scale: [2,2],
					top: 200
				},
				timingFunction: 'ease',  //可选，默认'ease'
				time: 2000,  //可选，默认400
				callback: function(){  //运动完回调函数，可选
					animate({
						el: self,
						animationName: 'animationData',
						json: {
							rotate: 0,
							opacity: 0.8,
							scale: [1.5,1.5],
							top: 100,
							left: 200
						},
						timingFunction: 'ease',
						time: 3000,
						callback: function(){
							console.log('运动完成');
						}
					})
				}
			});
		},
		
	}
}
</script>

<style lang="less">
#box{
	width: 100%;
	height: 1000upx;
	background: rgba(0,0,0,0.5);
	margin-top:20upx;
	position: relative;
	#move{
		background: #00B26A;
		display: inline-block;
		color: #fff;
		position: absolute;
		top: 0; left:100upx;
	}
}
</style>
